<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后台管理系统首页</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- import CSS -->
    <link href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="stylesheet">
    <link href="../Mall/js/elment.css" rel="stylesheet">
    <script src="../Mall/js/main.js"></script>

    <!--    引入首页样式-->
    <link href="favicon.ico" rel="shortcut icon" />
    <link href="../../indexCss.css" rel="stylesheet" type="text/css">
    <style>
        body {

            position: relative;
            color: rgba(0, 0, 0, 0.68)
        }

        a {
            color: rgba(0, 0, 0, 0.68);
            cursor: pointer; /*加手图标*/
            text-decoration: none;
        }

        a:hover {
            color: #24407EAD;
        }

        #topdiv > div {
            margin: 60px 0;

        }

    </style>

    <style>
        .el-carousel__item:nth-child(2n) {
            background-color: #99a9bf;
        }

        .el-carousel__item:nth-child(2n+1) {
            background-color: #d3dce6;
        }
    </style>
</head>
<body>
<!--动态背景画布-->
<!--<canvas id="canvas" style="height: 100%;z-index: -111;"></canvas>-->
<myheader></myheader>

<section>

    <div class="container" id="topdiv">
        <div class="row clearfix" >
            <div class="col-md-12 " style="padding: 0;position: relative;">
<!--            <div class="col-md-8 " style="padding: 0">-->
                <div class="col-md-2 ">
                    <mydiv v-bind:cls="cls" v-bind:com="com" v-bind:rcls="rcls" v-bind:rep="rep"></mydiv>
                </div>
                <div class="col-md-10 " id="ddd" style="float: right">
                    <h1>{{content}}</h1>
                    <div class="col-md-12 li" style="padding: 0;margin-left: 10px">
                            <!--瀑布流开始-->
                            <div class="grid">
                                <div class="grid-item col-md-12" >

                                    <div class="thumbnail"   style="height: 730px; overflow: hidden">
                                        <div style="overflow: hidden;width: 100%;height: 450px;text-align:center;">
                                            <!--                                    轮播图开始-->

                                            <template :loop="true">
                                                <el-carousel :interval="3000" height="430px" type="card">
                                                    <el-carousel-item>
                                                        <img :src="arr.url" alt="" style="height: 420px;">
                                                    </el-carousel-item>
                                                    <el-carousel-item v-for="item in arr.urls" >
                                                        <img :src="item" alt="" style="height: 420px;">
                                                    </el-carousel-item>
                                                </el-carousel>
                                            </template>

                                            <!--                                    轮播图结束-->
                                            <!--                                    <img :src="com.url" alt="暂无商品图" style="height: 440px;">&lt;!&ndash;width: 400px;&ndash;&gt;-->
                                        </div>
                                        <div class="caption">
                                            <h3>
                                               <b>商品名:</b>{{arr.name}}
                                            </h3>
                                            <h5>
                                                <b>库存:</b>{{arr.sum}}&nbsp;
                                                <b>已售:</b>{{arr.salesnum}}&nbsp;
                                                <b>价格:</b>{{arr.price}}
                                            </h5>
                                            <p>
                                                <b>商品简介:</b>{{arr.intro}}
                                            </p>
                                        </div>
                                        <div style="position: absolute;bottom: 22px;right: 20px">
                                            <a :href="'/admin/admin/updateCommodity.html?id='+arr.id" class="btn btn-primary btn-xs" type="button">去修改</a>
                                            <a  @click="del(arr.id)" class="btn btn-danger btn-xs" type="button">删除</a>
                                        </div>
                                    </div>

                                </div>

                            </div>
             </div>
                    <div class="col-md-12">
                        <template>
                            <div class="block">
                                <span class="demonstration">根据日期筛选</span>
                                <el-date-picker
                                        align="right"
                                        :clearable="true"
                                        end-placeholder="结束日期"
                                        range-separator="至"
                                        start-placeholder="开始日期"
                                        type="datetimerange"
                                        v-model="date2">
                                </el-date-picker>
                            </div>
                        </template>
                        <table class="table table-hover">
                            <tr>
                                <td>商品名</td>
                                <td>销售数量</td>
                                <td>销售金额</td>
                                <td>销售时间</td>
                            </tr>
                            <tr v-for="ct in comtrans" v-show="date2.length==0 || (new Date(ct.created).getTime()>date2[0].getTime()
                            && new Date(ct.created).getTime()<date2[1].getTime())" >
                                <td>{{ct.name}}</td>
                                <td>{{ct.sum}}</td>
                                <td>{{ct.sum*ct.price}}</td>
                                <td>{{ct.created}}</td>
                            </tr>
                        </table>
                    </div>
                </div>
                </div>

        </div>
    </div>

</section>
<!--正文在这里继续-->

<!--<myfooter></myfooter>-->
</div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

<!--导入弹窗组件-->
<script src=" https://unpkg.com/sweetalert/dist/sweetalert.min.js "></script>
<!--引入vue和axios-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!--引入footer-->
<!--<script src="adminjs/footer.js"></script>-->
<!--引入header-->
<script src="../adminjs/header.js"></script>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>

    let section_v = new Vue({
        el: "section",
        data: {
            cls: [], //类集合
            com: [], //商品集合
            arr: {},
            value: 3,
            content:"",
            rcls: [], //资讯类集合
            rep: [], //资讯集合
            comtrans:[], //商品的销售记录
            date2:[],
            // //绑定所要展示的商品信息属性
            size:0,
            id:0 //地址栏id
        },
        created: function () {
            let id = location.search.split("=")[1]
            axios.post("/admin/commoditySelectById?id="+id).then(function (response) {
                if (response.data.length==0 || response.data==null){
                    section_v.content = "您搜索的商品没有找到哦!!!,换一个试试吧...";
                }
                section_v.arr = response.data;
            }),
            axios.post("/admin/selectToClass").then(function (response) {
                section_v.id = id;
                section_v.cls = response.data;
            }),
                axios.post("/admin/selectToCommodity").then(function (response) {
                    section_v.com = response.data;
                })
            axios.post("/admin/selectToReportCls").then(function (response) {
                section_v.rcls = response.data;
            }),
                axios.post("/admin/selectToReport").then(function (response) {
                    section_v.rep = response.data;
                })
                axios.post("/trans/comtransAll?comId="+id).then(function (response) {
                    section_v.comtrans = response.data;
                })

        },
        methods: {
            skip:function (id){
                location.href="/admin/adminindex.html#d"+id;

            },
            showComtrans:function (created){
                let datenow = new Date(created).getTime();
                if (new Date(created).getTime()>section_v.date2[0].getTime() && new Date(created).getTime()>section_v.date2[1].getTime()){
                    return a = true;
                }
                return a = false;
            },
            comtransAllByDate:function (){
                axios.post("/trans/comtransAll?comId="+section_v.id+"&date1="+section_v.date2[0]+"&date2="+section_v.date2[1]).then(function (response) {
                    section_v.comtrans = response.data;
                })

            },
            cls: function (id) {
                axios.post("/admin/selectToCommodity?id=" + id).then(function (response) {
                    let com = response.data;
                    section_v.name = com.name;
                    section_v.intro = com.intro;
                    section_v.sum = com.sum;
                    section_v.price = com.price;
                    location.reload();
                })
            },
            del:function (id){
                if(confirm("您真的要删除吗???")){
                    axios.post("/admin/CommodityDelete?id=" + id).then(function () {
                        location.reload();
                    })
                }else {

                }

            }

        },
    })


</script>
<!--引入左侧边栏组件-->
<script src="../adminjs/mydiv.js"></script>
<!--背景线条-->
<script src="../adminjs/bg.js"></script>　
<!--右键出字体-->
<script src="../adminjs/bgfont.js"></script>　　
<!--引入动态背景js文件-->
<!--<script src="../bgjs2.js"></script>-->
</body>
</html>